<template>
  <ele-page flex-table>
    <ele-card flex-table :body-style="{ padding: '0px', overflow: 'hidden' }">
      <ele-split-panel flex-table
                       size="500px"
                       allow-collapse
                       :custom-style="{ borderWidth: '0 1px 0 0', padding: '0' }"
                       :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
                       :style="{ height: '100%', overflow: 'visible' }">
        <div style="padding: 16px 16px;">
          <report-type-tree @clickNode="clickNode">
          </report-type-tree>
        </div>

        <template #body>
          <report-table :typeId="typeId"></report-table>
        </template>
      </ele-split-panel>
    </ele-card>
  </ele-page>
</template>


<script setup>
import {ref} from 'vue';
import {pageTypes} from '@/api/manage/jimu/reportType';
import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined
} from '@/components/icons';
import {ElMessageBox} from 'element-plus/es';
import {EleMessage} from 'ele-admin-plus/es';
import ReportSearch from "./components/report-search.vue";
import ReportTable from "./components/report-table.vue";
import ReportTypeTree from "./components/report-type-tree.vue";
import ReportTypeSearch from "./components/report-type-search.vue";


const typeId = ref(0);

const clickNode = (data) => {
  typeId.value = data.id;
}

</script>
